<template>
  <div class="app-container">
    <el-row>
      <span>最近登录</span>
      <el-date-picker v-model="litQuery.stime" style="width: 150px;margin-left: 5px;" type="date" placeholder="开始"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <span>-</span>
      <el-date-picker v-model="litQuery.etime" style="width: 150px" type="date" value-format="yyyy-MM-dd"
        placeholder="结束">
      </el-date-picker>
      <span>时间</span>

      <el-switch style="margin-left: 5px;" v-model="litQuery.nonelogin" active-color="red" active-text="未登录过" inactive-text="有登录">
      </el-switch>

      <el-input v-model="litQuery.s" prefix-icon="el-icon-search" style="width: 250px;margin-left: 5px;"
        placeholder="姓名、用户名" @keyup.enter.native="searcn_but"></el-input>
      <el-button style="margin-left: 10px;" type="warning" @click="searcn_but" round>搜&nbsp;&nbsp;索</el-button>
    </el-row>
    <el-row>
      <el-table :data="userPage.records" stripe style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="姓名" label="姓名"> </el-table-column>
        <el-table-column prop="用户名" label="帐号"> </el-table-column>
        <el-table-column prop="登陆时间" label="最后登录时间">
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="userPage.current" :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]" :page-size="userPage.size"
          layout="total, sizes, prev, pager, next, jumper" :total="userPage.total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { UserModule } from "@/store/modules/user";
import { SoftVersion } from "@/api/commonApi";
import { queryUsers, login } from "@/api/users";
@Component({
  name: "sys-user",
})
export default class extends Vue {
  private created() {
    this.loadUsers();
  }

  private handleSizeChange(val: number) {
    this.litQuery.size = val;
    this.loadUsers();
  }
  private handleCurrentChange(val: number) {
    this.litQuery.page = val;
    this.loadUsers();
  }

  private litQuery: any = {
    s: "",
    current: 1,
    size: 10,
    page: 1,
    total: 0,
    nonelogin: false,
    stime: this.Format("yyyy-MM-dd", new Date()),
    etime: this.Format("yyyy-MM-dd", new Date()),
  };

  private Format(fmt: string, date: Date) {
    //author: meizz
    var o: any = {
      "M+": date.getMonth() + 1, //月份
      "d+": date.getDate(), //日
      "h+": date.getHours(), //小时
      "m+": date.getMinutes(), //分
      "s+": date.getSeconds(), //秒
      "q+": Math.floor((date.getMonth() + 3) / 3), //季度
      S: date.getMilliseconds(), //毫秒
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        (date.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length == 1
            ? o[k]
            : ("00" + o[k]).substr(("" + o[k]).length)
        );
      }
    }

    return fmt;
  }

  private searcn_but() {
    this.litQuery.page = 1;
    this.loadUsers();
  }

  private userPage: any = {};
  private async loadUsers() {
    let r: any = await queryUsers(this.litQuery);
    this.userPage = r.data;
  }
}
</script>